web6047 2022年 ４月

RPG コマンドメニュー Step. 12

煩雑な処理を改善

先月の 2022/3/26（土）の日記、「RPG コマンドメニュー　その４」の記事に掲載した Step.11 タブの中、

変更点２にて、「キャラクターのどうぐのメニューで、装備中を意味する「ｅ」の文字を選択肢中に表示した影響で、処理が煩雑になった」と書きました。（下図に抜粋、行番号は 288 付近）

この図の変更点２が示す部分（水色部分）では、douguMihon がほしいわけですが、douguMihonz から引っ張ってくるために、少し遠回りになっています。

1行目：douguMenu.selectedIndex を添え字にして character.dougus 配列から どうぐ を取り出し、その name プロパティを取り出している。

2行目：その name をキーにして douguMihonz から引っ張ってくる。

（以下の緑色部分は経験のある方向けの記述で、まだこれから勉強していく方にとってはこれから理解できるプログラミングの面白いところです）

水色部分の１行前の while( await douguMenu.select() ) { のあとで、水色部分の処理で どうぐ を参照するのは決まりきったことなのに、Menu クラスは selectedIndex（選択された項目の並び順） と selectedMenuTitle（選択された項目の表示文字列）しか用意していないという、後のプログラムに対する不親切な状態（設計）となっています。selectedItem（選択された項目が、ロジックではなく意味的に指す（後で使うであろう）オブジェクト）を用意してくれても良いんじゃないか、と思うわけです。

もちろん、オブジェクト指向的に考えれば、あるクラスが自分の役割を超えて、何かを特別に用意するというのは、依存関係が生まれそうで（のちの開発で 禍根（読み：かこん）を残しそうで）、難しいところですが、まぁ、人間の考える親切というのは時に理屈に合わないということもあるでしょう。この辺は議論の余地のあるところです。（えらそうに言っていますが、オブジェクト指向について私が無知なだけ（経験があるつもりで経験が浅いだけ）かも）

今回の Step.12 では、この煩雑な処理（不親切な設計）を改善しています。

1行目：douguMenu の selectedItem の name プロパティをキーにして、douguMihonz から取り出している。

このように簡潔になりました。

プログラミングのテクニックとして、ある問題についてどのように改善を行ったのか、具体的に見てほしいと思って改善したことを伏せずに明示することにしました。

しかし、よく使う変数の変数名を変更したので、下記の変更点はだいぶ多くなってしまいました。

62	baloonLength : 1, baloonColor : springgreen, baloonShiftRight : 40, baloonShiftTop : 4
<span style="color: #006600;">
<strong>変更点１（1/16）　</strong>目的：煩雑な処理を修正<br>
今まで Menu はその定義の中で、「メニューの選択肢」として items を設定していましたが、これを itemTitles に名前を変更しました。<br>
それに合わせて、その他の item と名のつく変数も itemTitle に変更しています。（全16か所）</span>

70 baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（2/16）</strong>89行、変数名 item → itemTitle</span>

270	baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（3/16）</strong>263行、変数名 item → itemTitle</span>

294	baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（4/16）</strong>287行、変数名 item → itemTitle</span>

297	baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（5/16）</strong>290行、変数名 item → itemTitle</span>

309	baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（6/16）</strong>302行、変数名 item → itemTitle</span>

316	baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（7/16）</strong>309行、変数名 item → itemTitle</span>

320	baloonLength : 1, baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（8/16）</strong>313行、変数名 item → itemTitle</span>

335	baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（9/16）</strong>328行、変数名 item → itemTitle</span>

354	baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（9/16）</strong>328行、変数名 item → itemTitle</span>

494	baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（9/16）</strong>328行、変数名 item → itemTitle</span>

503	baloonColor : springgreen, baloonLength : 1.5
<span style="color: #006600;">
<strong>変更点１（10/16）</strong>347行、変数名 item → itemTitle</span>

526	baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（11/16）</strong>456行、変数名 item → itemTitle</span>

566	baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（12/16）</strong>468行、変数名 item → itemTitle</span>

579	baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（13/16）</strong>539行、変数名 item → itemTitle</span>

610	baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（15/16）</strong>580行、変数名 item → itemTitle。<br>
また、下行に item についてあらためて追加</span>

623	baloonColor : springgreen
<span style="color: #006600;">
<strong>変更点１（16/16）</strong>593, 594行、変数名 item → itemTitle</span>

67	baloonColor : cyan, baloonShiftRight : 28
<span style="color: #000099;">
<strong>変更点２（1/5）</strong>　目的：煩雑な処理を修正<br>
別の意味で items という配列をあらためて設置しました。<br>
itemTitles はメニューに表示するための文字列の配列ですが、items はメニュー選択後に実際に使用するデータの配列です。</span>

279	baloonColor : cyan
<span style="color: #000099;">
<strong>変更点２（2/5）</strong>272行、items を設置</span>

298	baloonColor : cyan, baloonReverse : true
<span style="color: #000099;">
<strong>変更点２（3/5）</strong>291行、items を設置</span>

321	baloonColor : cyan, baloonReverse : true, baloonLength : 0.5
<span style="color: #000099;">
<strong>変更点２（4/5）</strong>314行、items を設置</span>

356	baloonColor : cyan, baloonReverse : true
<span style="color: #000099;">
<strong>変更点２（5/5）</strong>349行、items を設置</span>

529	baloonColor : cyan, baloonReverse : true, baloonShiftRight : 216
<span style="color: #000099;">
<strong>変更点３</strong><BR>
items が設定されているなら参照して selectedItem へセットする。<BR>
items が設定されていないなら null とする。
</span>

302	baloonReverse : true
<strong>変更点４（1/3）</strong>　目的：煩雑な処理を修正<br>
変更点２により、「メニューの選択後に実際に使用するデータ」を取り出すまでが簡潔になりました。

324	baloonReverse : true
<strong>変更点４（2/3）</strong>317行、「メニューの選択後に実際に使用するデータ」を取り出すまでが簡潔になりました。

361	baloonReverse : true
<strong>変更点４（3/3）</strong>354行、「メニューの選択後に実際に使用するデータ」を取り出すまでが簡潔になりました。

506
<strong>変更点５</strong> タイトルのほうが長い場合は、タイトルの長さをメニューウィンドウの幅として採用する。

下の大きな緑のボタンを押してプログラムを実行し、Zキーでトップメニューを開いて、「どうぐ」→「リサリー」と進めると、「まほうのステッキ　ｅ」と表示されます。

以下の JavaScript を新しいウィンドウで実行

<html><!--ESCAPEPROCESS-->

<head>

<title>Step12</title>

<meta content="text/html; charset=UTF-8" http-equiv="content-type">

<script>

console.clear();

</script>

<script src="touchjs/touch.js"></script>

<script>

//#####

function onloadx() {

app = new App( document.getElementById( "testCanvas" ) );

app.start();

}

/*

皆の者、聞いてくれ。

魔王は、突然この世にあらわれ、

いくつかの国や街、村を滅ぼした。

もうすでにわが国の軍隊は何度も魔王に挑み、敗北している。

兵士たちよ、皆の者の中に、

われこそはと名乗りを上げ、

魔王を倒してくれる者はおらぬか？

名乗りを上げますか？

*/

//##### App #####

class App {

//---Model---

constructor( canvas ) {

this.cc = canvas.getContext( "2d", { alpha : false } );

this.cc.canvas.width = 512;

this.cc.canvas.height = 448;

//画面上の要素を目的別に参照するための配列群

//（１つの要素が複数の目的に属しても良い）

this.elementz = {

menus : new Array(), //メニュー要素

draws : new Array(), //描画できる要素

}

this.currentElement = this;

this.animationFrameId = null;

this.cfg = {

charsize : 16,

}

//---storyData

this.douguMihonz = {

"やくそう" : {

storyOfCamp : async function() {

let dousuruMenu = this.openMenu( {

title : "どうする",

itemTitles : [

"つかう",

"わたす",

"すてる",

],

items : null,

} );

while( await dousuruMenu.select() ) {

alert( dousuruMenu.selectedItemTitle );

}//while

this.closeMenu();

}.bind( this ),//storyOfCamp()

},//やくそう

}//douguMihonz

this.playerCharacterz = {

"キエルン" : {

dougus : [

{

name : "やくそう",

},

{

name : "やくそう",

},

{

name : "やくそう",

},

{

name : "ひほう",

},

],

},

"トンキー" : {

dougus : [

],

},

"リサリー" : {

dougus : [

{

name : "まほうのステッキ",

equipped : true,

//equipped（読み：イクウィップト、意味：装備中）

},

],

},

}//playerCharacterz

//tweak.　requestAnimationFrameのために

this.frame = this.frame.bind( this );

/*

JavaScriptの

requestAnimationFrame()は関数を１つ受け取る。

class Appのframe()メソッドをその関数として渡した場合、

そのままだと

frame()メソッド中のthisがwindowオブジェクトになってしまう。

ここでbindしておくことでthisをあらかじめ定義する。

*/

}

start() {

//既存のキーイベントをバックアップ

this.onkeydownBak = window.onkeydown;

this.onkeyupBak = window.onkeyup;

//キーイベント

window.onkeydown = function( e ) {

//基本的にカレント要素に 押されたキー番号を渡す

this.currentElement.keyExec( e.which );

}.bind( this );

window.onkeyup = function( e ) {

}.bind( this );

//animationFrameの開始

this.frameTimestampBak = 0;

this.frame( 0 );

//タッチ対応　開始

touch.start( app.cc.canvas, 90, 88 );

}

stop() {

//タッチ対応　終了

touch.stop();

window.onkeydown = this.onkeydownBak;

window.onkeyup = this.onkeyupBak;

window.cancelAnimationFrame( this.animationFrameId );

}

frame( timestamp ) {

if( timestamp - this.frameTimestampBak >= 100 ) {

this.frameTimestampBak = timestamp;

this.draw( this.cc );

}

this.animationFrameId = requestAnimationFrame( this.frame );

}

openMenu( menuDefinition ) { //definition（意味：定義）

/*

メニューを開く手続き

Menuを作成し、目的別配列にセットし、カレントに設定する。

カレントとは、画面上に複数ある要素のうち、

キー入力等を受け取る現在アクティブな要素のこと。

*/

let menu = new Menu( menuDefinition, this );

//tweak.　サブメニューである場合、適切な位置を自動設定する。

let parentMenu = this.elementz.menus[ this.elementz.menus.length - 1 ];

if( parentMenu ) {

menu.gx = parentMenu.gx;

menu.gy = parentMenu.gy;

//check.　親にタイトルがある場合、タイトル分下へ

if( parentMenu.definition.title ) menu.gy += this.cfg.charsize;

let tweakCx, tweakCy;

if( parentMenu.definition.ch / parentMenu.definition.cw < 1 ) {

//親メニューが横長

tweakCx = parentMenu.cursorX * parentMenu.definition.cellCw + parentMenu.cursorX + 1;

//式中の + parentMenu.cursorX は

//選択肢間の横方向スペース（spacing）の数を意味する。

tweakCy = parentMenu.cursorY + 1;

console.log( "サブメニュー位置決め", 1 );

} else {

//親メニューが縦長

tweakCx = parentMenu.definition.cw;

tweakCy = parentMenu.selectedIndex + 1;

console.log( "サブメニュー位置決め", 2 );

}

menu.gx += tweakCx * this.cfg.charsize;

menu.gy += tweakCy * this.cfg.charsize;

if( Utl.isContain( parentMenu, menu ) ) {

//見た目として子メニューが親メニュー内に含まれるとき

//少し右にはみ出させる

menu.gx = parentMenu.gx + parentMenu.gw - menu.gw + this.cfg.charsize;

console.log( "サブメニュー位置決め", 3 );

}

}//if

this.elementz.menus.push( menu );

this.elementz.draws.push( menu );

this.currentElement = menu;

return menu;

}

closeMenu() {

//一番手前のメニューを閉じます。

//menusから削除し、

//（menusの最後が一番手前のメニューであり、それを閉じたいからpopでよい）

let menu = this.elementz.menus.pop();

//そのmenuをdrawsからも削除する。

this.elementz.draws.splice( this.elementz.draws.indexOf( menu ), 1 );

//カレントについて

if( this.elementz.menus.length )

//1つ前のmenuにカレントを変更する。

this.currentElement = this.elementz.menus[ this.elementz.menus.length - 1 ];

else

//メニューが他に無いときはカレントはこのアプリとする。

this.currentElement = this;

}

//---View---

draw( cc ) {

cc.fillStyle = "black";

cc.fillRect( 0, 0, cc.canvas.width, cc.canvas.height );

cc.font = ( this.cfg.charsize - 1 ) + "px monospace";

//グリッド

cc.strokeStyle = "darkblue";

for( let y = 0; y < cc.canvas.width; y += this.cfg.charsize ) {

for( let x = 0; x < cc.canvas.width; x += this.cfg.charsize ) {

cc.strokeRect( x, y, this.cfg.charsize, this.cfg.charsize );

}

}

//「描画できる要素」を描画

for( let element of this.elementz.draws ) {

element.draw( cc );

}

//debug. グリッド2

if( 0 ) {

cc.strokeStyle = "RGBA(0,0,0,.125)";

for( let y = 0; y < cc.canvas.width; y += this.cfg.charsize ) {

for( let x = 0; x < cc.canvas.width; x += this.cfg.charsize ) {

cc.strokeRect( x, y, this.cfg.charsize, this.cfg.charsize );

}

}

}

}//draw()

//---Controller---

keyExec( key ) {

//キーを処理する（App）

if( key == 90 ) { //z key

this.storyOfCamp();

}

else if( key == 88 ) { //x key

}

else {

console.log( "app:", key );

}

}

//---DATA---

//RPGイベントスクリプト（＝storyと呼ぶ）

async storyOfCamp() { //中で await を使う関数は async を付けること

//RPGイベントスクリプト：

//フィールド上で開くコマンドメニュー

let commandMenu = this.openMenu( { //トップメニュー作成

cx : 3,

cy : 3,

title : "コマンド",

itemTitles : [

"しらべる",

"どうぐ",

"まほう",

"ひっさつ",

"つよさ",

"みせ（テスト）",

"Ｓａｍｐｌｅ２",

],

items : null,

} );

while( await commandMenu.select() ) { //トップメニュー選択待ち

/*

awaitでJavaScriptは一時停止します。

commandMenu.select()はPromiseをreturnしています。

そのPromiseの「処理完了」で一時停止が解除されます。

なぜwhileなのかというとそれはサブメニューに対応するためです。

whileを入れ子にするとサブメニューを表現しやすくなります。

async, await, Promise は少し難しいですが

ゲームでよく使うhitAnyKey()や、delay()を

簡単に実現できて便利なので覚えたほうが良いです。

*/

if( commandMenu.selectedItemTitle == "どうぐ" ) {

let characterMenu = this.openMenu( { //サブメニュー１作成

title : "だれの",

itemTitles : Object.keys( this.playerCharacterz ),

items : Object.values( this.playerCharacterz ),

} );

while( await characterMenu.select() ) { //サブメニュー１選択待ち

let character = characterMenu.selectedItem;

//check.　どうぐをもっていない

if( character.dougus.length == 0 ) {

continue;

}

//どうぐリストに装備中を示すｅの文字を付与する

let itemTitles;

let douguNames = Utl.getArrayOfKey( character.dougus, "name" );

let douguEquippedMarks = new Array();

//ｅの文字の有無を表す配列を作成

for( let i = 0; i < character.dougus.length; i++ )

douguEquippedMarks.push( character.dougus[ i ].equipped ? "ｅ" : "" );

//どうぐの名前とｅの文字を合成してメニューの選択肢にする

itemTitles = Utl.joinToRight( douguNames, douguEquippedMarks );

let douguMenu = this.openMenu( { //サブメニュー２作成

title : "どれ",

itemTitles : itemTitles,

items : character.dougus,

} );

while( await douguMenu.select() ) { //サブメニュー２選択待ち

let douguMihon = this.douguMihonz[ douguMenu.selectedItem.name ];

//check.　未定義

if( ! douguMihon ) continue;

if( ! douguMihon.storyOfCamp ) continue;

await douguMihon.storyOfCamp( characterMenu.selectedItem );

}

this.closeMenu();

}

//characterMenu.select()でキャンセルされるとここに来ます。

this.closeMenu();

}

else if( commandMenu.selectedItemTitle == "みせ（テスト）" ) {

this.storyOfShop( {

title : "どうぐや「セリーヌ・デ・イオン」",

shopItems : [

{ name : "やくそう", price : 10 },

{ name : "どうのつるぎ", price : 120 },

],

} );

}

}//while

//commandMenu.select()でキャンセルされるとここに来ます。

this.closeMenu();

}//storyOfCamp()

async storyOfShop( menuDefinition ) {

//shopItems の各要素の name と price を結合し、１つのメニュー選択肢にする

let names = Utl.getArrayOfKey( menuDefinition.shopItems, "name" );

let prices = Utl.getArrayOfKey( menuDefinition.shopItems, "price" );

prices = Utl.hans2zens( prices );

menuDefinition.itemTitles = Utl.joinToRight( names, prices, menuDefinition.title.length, "Ｇ" );

menuDefinition.items = menuDefinition.shopItems;

//お店メニューを実行

let shopMenu = this.openMenu( menuDefinition );

while( await shopMenu.select() ) {

let shopItem = shopMenu.selectedItem;

alert( shopItem.name + "は " + shopItem.price + " Gだ。" );

}

this.closeMenu();

}//storyOfShop()

}//App

//##### Utl #####

class Utl {

/*

汎用のユーティリティを集めたクラス。

このクラスの各メソッドはクラスメソッド（static を付けている）なので、

alert( Utl.han2zen( "test" ) ); //結果："ｔｅｓｔ"

のような書き方で、使用します。

*/

static getArrayOfKey( array, key ) { //keyに対応する値の配列を取得します。

/*

引数arrayの各要素はオブジェクトであることが前提です。

引数arrayの各要素のkeyプロパティからなる配列を返します。

*/

let result = new Array();

for( let object of array ) {

result.push( object[ key ] );

}

return result;

}

static han2zen( string ) { //文字列中の半角文字を全角文字に変換します。

//check.

string = String( string ); //数値の場合は文字列にする

let result = "";

let hanSta = "!".charCodeAt( 0 ); //文字コード中の半角開始位置

let hanEnd = "~".charCodeAt( 0 ); //文字コード中の半角終了位置

for( let i = 0; i < string.length; i++ ) {

let charCode = string.charCodeAt( i );

if( charCode >= hanSta && charCode <= hanEnd )

//半角は全角に

result += String.fromCharCode( charCode + 0xFEE0 );

else

//全角はそのまま

result += String.fromCharCode( charCode );

}

return result;

//上記は下記でも同じ結果となります。（正規表現とアロー関数式を使用）

//return s.replace( /[!-~]/g, c => String.fromCharCode( c.charCodeAt( 0 ) + 0xFEE0 ) );

}

static hans2zens( array ) { //配列中の半角文字を全角文字に変換します。

let result = new Array();

for( let element of array )

result.push( this.han2zen( String( element ) ) );

return result;

}

static getMaxLengthOf( array ) { //文字列の配列の中で、一番長い文字列の文字数を返す。

let maxLength = 0;

for( let element of array ) {

maxLength = Math.max( maxLength, String( element ).length );

}

return maxLength;

}

static joinToRight( array, notes, otherLength, unit ) { //文字列配列にメモを付ける（右寄せ）

/*

arrayの要素を左寄せ、notesの要素を右寄せにした文字列配列を返す。

arrayとnotesは配列であり、両者の数は等しいこと。

otherLength maxLengthについてotherLengthのほうが長いなら、otherLengthの長さを採用する。

unit noteに単位を付ける。

*/

//check.　引数が省略された

if( ! otherLength ) otherLength = 0;

if( ! unit ) unit = "";

//check.　間違えて文字列を指定している

if( typeof otherLength === "string" ) alert( "error at joinToRight()" );

//check.　notes がすべて空文字列である

if( notes.join("") == "" ) return array;

let maxLength = this.getMaxLengthOf( array ) + 1 + this.getMaxLengthOf( notes ) + unit.length;

//途中の１は、少なくとも１つのスペースを開けるという意味

//check.　otherLengthも考慮する

maxLength = Math.max( maxLength, otherLength );

let result = new Array();

for( let i = 0; i < array.length; i++ ) {

let element = array[ i ];

let note = notes[ i ];

let interval = maxLength - element.length - note.length - unit.length;

let spaces = Array( interval + 1 ).join( "　" );

result.push( element + spaces + note + unit );

}

return result;

}//joinToRight()

static isContain( parent, child ) {

/*

parentの描画範囲がchildの描画範囲を含むときtrue

parent, child はそれぞれ、gx, gy, gw, gh を用意していることが前提。

*/

//check.

if( parent.gx == null || child.gx == null ) {

alert( "err: object has not gx or other axis at Utl.isContain()." );

return;

}

return child.gx >= parent.gx && child.gy >= parent.gy

&& child.gx + child.gw <= parent.gx + parent.gw

&& child.gy + child.gh <= parent.gy + parent.gh;

}//isContain()

}//Utl

//##### Menu #####

class Menu {

/*

Menu は、

「１つのメニューを表示し、カーソルで選択肢を選び、選ばれた選択肢を返す」

という単純な動きを行う。

*/

//---Model---

constructor( definition, app ) { //definition(意味：定義)

this.definition = Object.assign( { //assign()は第１引数を第２引数で上書きする

//初期値

cx : 0,

cy : 0,

}, definition ); //初期値に上書きする

/*

その他

cw //ウィンドウの横幅（単位=文字）

ch //ウィンドウの縦幅（単位=文字）

*/

this.appcfg = app.cfg;

//check.　ch未指定時

if( this.definition.ch == null ) {

this.definition.ch = this.definition.itemTitles.length;

}

//check.

if( this.definition.title )

this.definition.ch ++;

//check.　cw未指定時　自動計算

if( this.definition.cw == null ) {

//選択肢の中で一番大きい文字列幅を得る。

this.definition.cw = Utl.getMaxLengthOf( this.definition.itemTitles );

//check.　タイトルについても考慮する

if( this.definition.title )

this.definition.cw = Math.max( this.definition.cw, this.definition.title.length );

}

//メニュー枠の内側のスペース（単位dot）

this.padding = this.appcfg.charsize / 2;

//画面上の描画位置とサイズ

this.gx = this.definition.cx * this.appcfg.charsize - this.padding;

this.gy = this.definition.cy * this.appcfg.charsize - this.padding;

this.gw = this.definition.cw * this.appcfg.charsize + this.padding * 2;

this.gh = this.definition.ch * this.appcfg.charsize + this.padding;

//カーソル位置

this.cursorY = 0;

//選択された選択肢番号と選択肢

this.updateSelectedIndex();

}//constructor()

updateSelectedIndex() {

this.selectedIndex = this.cursorY;

this.selectedItemTitle = this.definition.itemTitles[ this.selectedIndex ];

if( this.definition.items )

this.selectedItem = this.definition.items[ this.selectedIndex ];

else

this.selectedItem = null;

}

//---View---

draw( cc ) {

cc.save();

cc.translate( this.gx, this.gy + this.padding ); //tr1

//枠を描画

cc.fillStyle = "white";

cc.strokeStyle = "black";

cc.fillRect( 0, 0, this.gw, this.gh );

cc.strokeRect( 0, 0, this.gw, this.gh );

//タイトルを描画

if( this.definition.title ) {

let leftSpace = Math.floor( ( this.definition.cw - this.definition.title.length ) / 2 );

let titleStringX = this.padding + leftSpace * this.appcfg.charsize;

let titleStringY = this.appcfg.charsize - 2;

let titleW = this.gw;

let titleH = this.appcfg.charsize;

//タイトル背景

cc.fillStyle = "blue";

cc.fillRect( 0, 0, titleW, titleH );

//タイトル文字

cc.fillStyle = "white";

cc.fillText( this.definition.title, titleStringX, titleStringY );

cc.fillText( this.definition.title, titleStringX + 1, titleStringY );

cc.translate( 0, this.appcfg.charsize ); //tr2

}

//選択肢を描画

cc.translate( this.padding, 0 ); //tr3

cc.fillStyle = "black";

for( let i = 0; i < this.definition.itemTitles.length; i++ ) {

let gx = 0;

let gy = i * this.appcfg.charsize;

//check.　カーソルを描画

if( i == this.cursorY ) {

let bak = cc.fillStyle;

cc.fillStyle = "#ff7";

let gw = this.definition.cw * this.appcfg.charsize;

let gh = this.appcfg.charsize;

cc.fillRect( gx, gy, gw, gh );

cc.fillStyle = bak;

}

cc.fillText( this.definition.itemTitles[ i ],

gx, gy + this.appcfg.charsize - 2 );

}

cc.restore();

//debug.　メニューの表示指定位置を示す赤い点

//（青いグリッドの交点と赤い点が一致している）

if( 1 ) {

cc.beginPath();

cc.arc( this.gx + this.padding, this.gy + this.padding, 2, 0, 6.28 );

cc.fillStyle = "red";

cc.fill();

}

}//draw()

//---Controller---

keyExec( key ) {

//キーを処理する（Menu）

if( key == 90 ) { //z key

//決定キーの挙動

this.sigotoOk( true );

/*

RPGイベントスクリプト（たとえばstoryOfCamp()）内の

while( await menu.select() ) {...} のselect()の返値がこの引数。

trueは「メニュー選択が行われた」という意味

falseは「「メニュー選択がキャンセルされた」という意味

*/

}

else if( key == 88 ) { //x key

//キャンセルキーの挙動

this.selectedIndex = null;

this.selectedItemTitle = null;

this.selectedItem = null;

this.sigotoOk( false );

}

else {

//カーソルの移動

let addY = ( key == 40 ) - ( key == 38 );

if( addY ) {

this.cursorY += addY;

//check.　範囲外

if( this.cursorY < 0 )

this.cursorY = 0;

else if( this.cursorY >= this.definition.itemTitles.length )

this.cursorY = this.definition.itemTitles.length - 1;

this.updateSelectedIndex();

}//if

}//if

}//keyExec()

select() {

return new Promise( function( sigotoOk ) {

this.sigotoOk = sigotoOk;

}.bind( this ) );

/*

new Promise()の引数の関数はすぐに実行される。

その際に関数に渡される引数のsigotoOkは

Promiseの完了を知らせる関数である。

この関数（sigotoOk）はJavaScriptのシステムが自動的に引数として渡す。

sigotoOk()がどこかのタイミング（ここではkeyExec()内）で

実行されると、awaitで一時停止していたJavaScript（ここではstoryOfCamp()）

が再開される。

*/

}//select()

}//Menu

//#####

</script>

<style>

.help, .help div {

position : absolute;

top : 0;

right : 0;

padding : .5em;

}

</style>

</head>

<body onload="onloadx()">

<canvas id="testCanvas" style="

object-fit : contain;

width : 100%;

height : 100%;

">

There is no canvas.

</canvas>

<div class="help" style="background-color:white; border:solid 3px #0f0;">

<div style="

background-color : #0f0;

border-radius : 0 0 0 1em;

cursor : pointer;

" onclick="this.parentNode.style.display = 'none';">　HELP　×　</div>

zキーまたはタッチ　：　「決定」<BR>

xキーまたはダブルタッチ　：　「キャンセル」<BR>

方向キーまたはフリック　：　その方向に1回動かします。<BR>

スワイプして止める　：　方向キーを押し続ける動きになります。

</div>

</body>

</html>

RPG コマンドメニュー Step. 13

メニュー段組に対応

段組とは、「２列以上の列に分けて文字や図などを配列すること」です。

このようにドラクエ２のコマンドメニューと同じものを表現できます。

変更点は１～１３ほどあります。大まかには、

• 段組のための新しい設定値を用意
• 上下だけでなく、左右にも動くようになったカーソルの対応
• メニュー選択肢をマス目上に配置する

といったことを行っています。

269	baloonLength : .5, baloonShiftBottom : 4, baloonShiftRight : 8
<strong>変更点１　</strong>　目的：段組対応<br>
横方向の段組の数。


270	baloonReverse : true
<strong>変更点２　</strong>　目的：段組対応<br>
メニュー選択肢が流れる方向。<BR>
0: 右へ流れきったら下の行へ移るのか、<BR>
1: 下へ流れきったら右へ移るのか。


485	baloonShiftBottom : 8
<strong>変更点３　</strong>　目的：段組対応<br>
段組のためにいろいろ設定値が増えた。

各設定はコメントの通り。


501
<strong>変更点４　</strong>　目的：段組対応<br>
未指定の際、自動計算　rows


505	baloonLength : .5, baloonShiftBottom : 4
<strong>変更点５　</strong>　目的：段組対応<br>
未指定の際、自動計算　ch


513
<strong>変更点６　</strong>　目的：段組対応<br>
選択肢の中で一番長い文字数を得る


516	baloonLength : .5, baloonShiftBottom : 4
<strong>変更点７　</strong>　目的：段組対応<br>
未指定の際、自動計算　cellCW


521	baloonLength : .5, baloonShiftBottom : 4
<strong>変更点８　</strong>　目的：段組対応<br>
未指定の際、自動計算　cw


538	baloonLength : .5, baloonShiftBottom : 4
<strong>変更点９　</strong>　目的：段組対応<br>
カーソルが横方向にも動くようになったため


546
<strong>変更点１０　</strong>　目的：段組対応<br>
カーソル位置に対応する配列 items, itemTitles の添え字を得る


601
<strong>変更点１１　</strong>　目的：段組対応<br>
行と列を進めて、選択肢を描いていく

614	baloonLength : 0.5, baloonShiftBottom : 4
行と列がカーソル位置のときはカーソルを描画


617
カーソルの大きさを計算


624
描く選択肢がないなら次のループへ


664
<strong>変更点１２　</strong>　目的：段組対応<br>
カーソルは横にも動くようになったため


671
<strong>変更点１３　</strong>　目的：段組対応<br>
X, Y それぞれ、範囲外であれば訂正

以下の JavaScript を新しいウィンドウで実行

<html><!--ESCAPEPROCESS-->

<head>

<title>Step13</title>

<meta content="text/html; charset=UTF-8" http-equiv="content-type">

<script>

console.clear();

</script>

<script src="touchjs/touch.js"></script>

<script>

//#####

function onloadx() {

app = new App( document.getElementById( "testCanvas" ) );

app.start();

}

/*

皆の者、聞いてくれ。

魔王は、突然この世にあらわれ、

いくつかの国や街、村を滅ぼした。

もうすでにわが国の軍隊は何度も魔王に挑み、敗北している。

兵士たちよ、皆の者の中に、

われこそはと名乗りを上げ、

魔王を倒してくれる者はおらぬか？

名乗りを上げますか？

*/

//##### App #####

class App {

//---Model---

constructor( canvas ) {

this.cc = canvas.getContext( "2d", { alpha : false } );

this.cc.canvas.width = 512;

this.cc.canvas.height = 448;

//画面上の要素を目的別に参照するための配列群

//（１つの要素が複数の目的に属しても良い）

this.elementz = {

menus : new Array(), //メニュー要素

draws : new Array(), //描画できる要素

}

this.currentElement = this;

this.animationFrameId = null;

this.cfg = {

charsize : 16,

}

//---storyData

this.douguMihonz = {

"やくそう" : {

storyOfCamp : async function() {

let dousuruMenu = this.openMenu( {

title : "どうする",

itemTitles : [

"つかう",

"わたす",

"すてる",

],

items : null,

} );

while( await dousuruMenu.select() ) {

alert( dousuruMenu.selectedItemTitle );

}//while

this.closeMenu();

}.bind( this ),//storyOfCamp()

},//やくそう

}//douguMihonz

this.playerCharacterz = {

"キエルン" : {

dougus : [

{

name : "やくそう",

},

{

name : "やくそう",

},

{

name : "やくそう",

},

{

name : "ひほう",

},

],

},

"トンキー" : {

dougus : [

],

},

"リサリー" : {

dougus : [

{

name : "まほうのステッキ",

equipped : true,

//equipped（読み：イクウィップト、意味：装備中）

},

],

},

}//playerCharacterz

//tweak.　requestAnimationFrameのために

this.frame = this.frame.bind( this );

/*

JavaScriptの

requestAnimationFrame()は関数を１つ受け取る。

class Appのframe()メソッドをその関数として渡した場合、

そのままだと

frame()メソッド中のthisがwindowオブジェクトになってしまう。

ここでbindしておくことでthisをあらかじめ定義する。

*/

}

start() {

//既存のキーイベントをバックアップ

this.onkeydownBak = window.onkeydown;

this.onkeyupBak = window.onkeyup;

//キーイベント

window.onkeydown = function( e ) {

//基本的にカレント要素に 押されたキー番号を渡す

this.currentElement.keyExec( e.which );

}.bind( this );

window.onkeyup = function( e ) {

}.bind( this );

//animationFrameの開始

this.frameTimestampBak = 0;

this.frame( 0 );

//タッチ対応　開始

touch.start( app.cc.canvas, 90, 88 );

}

stop() {

//タッチ対応　終了

touch.stop();

window.onkeydown = this.onkeydownBak;

window.onkeyup = this.onkeyupBak;

window.cancelAnimationFrame( this.animationFrameId );

}

frame( timestamp ) {

if( timestamp - this.frameTimestampBak >= 100 ) {

this.frameTimestampBak = timestamp;

this.draw( this.cc );

}

this.animationFrameId = requestAnimationFrame( this.frame );

}

openMenu( menuDefinition ) { //definition（意味：定義）

/*

メニューを開く手続き

Menuを作成し、目的別配列にセットし、カレントに設定する。

カレントとは、画面上に複数ある要素のうち、

キー入力等を受け取る現在アクティブな要素のこと。

*/

let menu = new Menu( menuDefinition, this );

//tweak.　サブメニューである場合、適切な位置を自動設定する。

let parentMenu = this.elementz.menus[ this.elementz.menus.length - 1 ];

if( parentMenu ) {

menu.gx = parentMenu.gx;

menu.gy = parentMenu.gy;

//check.　親にタイトルがある場合、タイトル分下へ

if( parentMenu.definition.title ) menu.gy += this.cfg.charsize;

let tweakCx, tweakCy;

if( parentMenu.definition.ch / parentMenu.definition.cw < 1 ) {

//親メニューが横長

tweakCx = parentMenu.cursorX * parentMenu.definition.cellCw + parentMenu.cursorX + 1;

//式中の + parentMenu.cursorX は

//選択肢間の横方向スペース（spacing）の数を意味する。

tweakCy = parentMenu.cursorY + 1;

console.log( "サブメニュー位置決め", 1 );

} else {

//親メニューが縦長

tweakCx = parentMenu.definition.cw;

tweakCy = parentMenu.selectedIndex + 1;

console.log( "サブメニュー位置決め", 2 );

}

menu.gx += tweakCx * this.cfg.charsize;

menu.gy += tweakCy * this.cfg.charsize;

if( Utl.isContain( parentMenu, menu ) ) {

//見た目として子メニューが親メニュー内に含まれるとき

//少し右にはみ出させる

menu.gx = parentMenu.gx + parentMenu.gw - menu.gw + this.cfg.charsize;

console.log( "サブメニュー位置決め", 3 );

}

}//if

this.elementz.menus.push( menu );

this.elementz.draws.push( menu );

this.currentElement = menu;

return menu;

}

closeMenu() {

//一番手前のメニューを閉じます。

//menusから削除し、

//（menusの最後が一番手前のメニューであり、それを閉じたいからpopでよい）

let menu = this.elementz.menus.pop();

//そのmenuをdrawsからも削除する。

this.elementz.draws.splice( this.elementz.draws.indexOf( menu ), 1 );

//カレントについて

if( this.elementz.menus.length )

//1つ前のmenuにカレントを変更する。

this.currentElement = this.elementz.menus[ this.elementz.menus.length - 1 ];

else

//メニューが他に無いときはカレントはこのアプリとする。

this.currentElement = this;

}

//---View---

draw( cc ) {

cc.fillStyle = "black";

cc.fillRect( 0, 0, cc.canvas.width, cc.canvas.height );

cc.font = ( this.cfg.charsize - 1 ) + "px monospace";

//グリッド

cc.strokeStyle = "darkblue";

for( let y = 0; y < cc.canvas.width; y += this.cfg.charsize ) {

for( let x = 0; x < cc.canvas.width; x += this.cfg.charsize ) {

cc.strokeRect( x, y, this.cfg.charsize, this.cfg.charsize );

}

}

//「描画できる要素」を描画

for( let element of this.elementz.draws ) {

element.draw( cc );

}

//debug. グリッド2

if( 0 ) {

cc.strokeStyle = "RGBA(0,0,0,.125)";

for( let y = 0; y < cc.canvas.width; y += this.cfg.charsize ) {

for( let x = 0; x < cc.canvas.width; x += this.cfg.charsize ) {

cc.strokeRect( x, y, this.cfg.charsize, this.cfg.charsize );

}

}

}

}//draw()

//---Controller---

keyExec( key ) {

//キーを処理する（App）

if( key == 90 ) { //z key

this.storyOfCamp();

}

else if( key == 88 ) { //x key

}

else {

console.log( "app:", key );

}

}

//---DATA---

//RPGイベントスクリプト（＝storyと呼ぶ）

async storyOfCamp() { //中で await を使う関数は async を付けること

//RPGイベントスクリプト：

//フィールド上で開くコマンドメニュー

let commandMenu = this.openMenu( { //トップメニュー作成

cx : 3,

cy : 3,

cols : 2,

masuDir : 1, //1:下へ、0:右へ

title : "コマンド",

itemTitles : [

"しらべる",

"どうぐ",

"まほう",

"ひっさつ",

"つよさ",

"みせ（テスト）",

"Ｓａｍｐｌｅ２",

],

items : null,

} );

while( await commandMenu.select() ) { //トップメニュー選択待ち

/*

awaitでJavaScriptは一時停止します。

commandMenu.select()はPromiseをreturnしています。

そのPromiseの「処理完了」で一時停止が解除されます。

なぜwhileなのかというとそれはサブメニューに対応するためです。

whileを入れ子にするとサブメニューを表現しやすくなります。

async, await, Promise は少し難しいですが

ゲームでよく使うhitAnyKey()や、delay()を

簡単に実現できて便利なので覚えたほうが良いです。

*/

if( commandMenu.selectedItemTitle == "どうぐ" ) {

let characterMenu = this.openMenu( { //サブメニュー１作成

title : "だれの",

itemTitles : Object.keys( this.playerCharacterz ),

items : Object.values( this.playerCharacterz ),

} );

while( await characterMenu.select() ) { //サブメニュー１選択待ち

let character = characterMenu.selectedItem;

//check.　どうぐをもっていない

if( character.dougus.length == 0 ) {

continue;

}

//どうぐリストに装備中を示すｅの文字を付与する

let itemTitles;

let douguNames = Utl.getArrayOfKey( character.dougus, "name" );

let douguEquippedMarks = new Array();

//ｅの文字の有無を表す配列を作成

for( let i = 0; i < character.dougus.length; i++ )

douguEquippedMarks.push( character.dougus[ i ].equipped ? "ｅ" : "" );

//どうぐの名前とｅの文字を合成してメニューの選択肢にする

itemTitles = Utl.joinToRight( douguNames, douguEquippedMarks );

let douguMenu = this.openMenu( { //サブメニュー２作成

title : "どれ",

itemTitles : itemTitles,

items : character.dougus,

} );

while( await douguMenu.select() ) { //サブメニュー２選択待ち

let douguMihon = this.douguMihonz[ douguMenu.selectedItem.name ];

//check.　未定義

if( ! douguMihon ) continue;

if( ! douguMihon.storyOfCamp ) continue;

await douguMihon.storyOfCamp( characterMenu.selectedItem );

}

this.closeMenu();

}

//characterMenu.select()でキャンセルされるとここに来ます。

this.closeMenu();

}

else if( commandMenu.selectedItemTitle == "みせ（テスト）" ) {

this.storyOfShop( {

title : "どうぐや「セリーヌ・デ・イオン」",

shopItems : [

{ name : "やくそう", price : 10 },

{ name : "どうのつるぎ", price : 120 },

],

} );

}

}//while

//commandMenu.select()でキャンセルされるとここに来ます。

this.closeMenu();

}//storyOfCamp()

async storyOfShop( menuDefinition ) {

//shopItems の各要素の name と price を結合し、１つのメニュー選択肢にする

let names = Utl.getArrayOfKey( menuDefinition.shopItems, "name" );

let prices = Utl.getArrayOfKey( menuDefinition.shopItems, "price" );

prices = Utl.hans2zens( prices );

menuDefinition.itemTitles = Utl.joinToRight( names, prices, menuDefinition.title.length, "Ｇ" );

menuDefinition.items = menuDefinition.shopItems;

//お店メニューを実行

let shopMenu = this.openMenu( menuDefinition );

while( await shopMenu.select() ) {

let shopItem = shopMenu.selectedItem;

alert( shopItem.name + "は " + shopItem.price + " Gだ。" );

}

this.closeMenu();

}//storyOfShop()

}//App

//##### Utl #####

class Utl {

/*

汎用のユーティリティを集めたクラス。

このクラスの各メソッドはクラスメソッド（static を付けている）なので、

alert( Utl.han2zen( "test" ) ); //結果："ｔｅｓｔ"

のような書き方で、使用します。

*/

static getArrayOfKey( array, key ) { //keyに対応する値の配列を取得します。

/*

引数arrayの各要素はオブジェクトであることが前提です。

引数arrayの各要素のkeyプロパティからなる配列を返します。

*/

let result = new Array();

for( let object of array ) {

result.push( object[ key ] );

}

return result;

}

static han2zen( string ) { //文字列中の半角文字を全角文字に変換します。

//check.

string = String( string ); //数値の場合は文字列にする

let result = "";

let hanSta = "!".charCodeAt( 0 ); //文字コード中の半角開始位置

let hanEnd = "~".charCodeAt( 0 ); //文字コード中の半角終了位置

for( let i = 0; i < string.length; i++ ) {

let charCode = string.charCodeAt( i );

if( charCode >= hanSta && charCode <= hanEnd )

//半角は全角に

result += String.fromCharCode( charCode + 0xFEE0 );

else

//全角はそのまま

result += String.fromCharCode( charCode );

}

return result;

//上記は下記でも同じ結果となります。（正規表現とアロー関数式を使用）

//return s.replace( /[!-~]/g, c => String.fromCharCode( c.charCodeAt( 0 ) + 0xFEE0 ) );

}

static hans2zens( array ) { //配列中の半角文字を全角文字に変換します。

let result = new Array();

for( let element of array )

result.push( this.han2zen( String( element ) ) );

return result;

}

static getMaxLengthOf( array ) { //文字列の配列の中で、一番長い文字列の文字数を返す。

let maxLength = 0;

for( let element of array ) {

maxLength = Math.max( maxLength, String( element ).length );

}

return maxLength;

}

static joinToRight( array, notes, otherLength, unit ) { //文字列配列にメモを付ける（右寄せ）

/*

arrayの要素を左寄せ、notesの要素を右寄せにした文字列配列を返す。

arrayとnotesは配列であり、両者の数は等しいこと。

otherLength maxLengthについてotherLengthのほうが長いなら、otherLengthの長さを採用する。

unit noteに単位を付ける。

*/

//check.　引数が省略された

if( ! otherLength ) otherLength = 0;

if( ! unit ) unit = "";

//check.　間違えて文字列を指定している

if( typeof otherLength === "string" ) alert( "error at joinToRight()" );

//check.　notes がすべて空文字列である

if( notes.join("") == "" ) return array;

let maxLength = this.getMaxLengthOf( array ) + 1 + this.getMaxLengthOf( notes ) + unit.length;

//途中の１は、少なくとも１つのスペースを開けるという意味

//check.　otherLengthも考慮する

maxLength = Math.max( maxLength, otherLength );

let result = new Array();

for( let i = 0; i < array.length; i++ ) {

let element = array[ i ];

let note = notes[ i ];

let interval = maxLength - element.length - note.length - unit.length;

let spaces = Array( interval + 1 ).join( "　" );

result.push( element + spaces + note + unit );

}

return result;

}//joinToRight()

static isContain( parent, child ) {

/*

parentの描画範囲がchildの描画範囲を含むときtrue

parent, child はそれぞれ、gx, gy, gw, gh を用意していることが前提。

*/

//check.

if( parent.gx == null || child.gx == null ) {

alert( "err: object has not gx or other axis at Utl.isContain()." );

return;

}

return child.gx >= parent.gx && child.gy >= parent.gy

&& child.gx + child.gw <= parent.gx + parent.gw

&& child.gy + child.gh <= parent.gy + parent.gh;

}//isContain()

}//Utl

//##### Menu #####

class Menu {

/*

Menu は、

「１つのメニューを表示し、カーソルで選択肢を選び、選ばれた選択肢を返す」

という単純な動きを行う。

*/

//---Model---

constructor( definition, app ) { //definition(意味：定義)

this.definition = Object.assign( { //assign()は第１引数を第２引数で上書きする

//初期値

cx : 0,

cy : 0,

cols : 1, //選択肢を横方向に並べる数

masuDir : 1, //1:下へ、0:右へ

spacing : 1, //選択肢同士の左右方向のスペース（単位=文字）

cellCh : 1, //選択肢の高さ（単位=文字）

}, definition ); //初期値に上書きする

/*

その他

cw //ウィンドウの横幅（単位=文字）

ch //ウィンドウの縦幅（単位=文字）

rows //選択肢を縦方向に並べる数

cellCw //選択肢の幅（単位=文字）

*/

this.appcfg = app.cfg;

//check.　rows 未指定時

if( this.definition.rows == null ) {

this.definition.rows = Math.ceil( this.definition.itemTitles.length / this.definition.cols );

}

//check.　ch 未指定時

if( this.definition.ch == null ) {

this.definition.ch = this.definition.rows * this.definition.cellCh;

}

//check.

if( this.definition.title )

this.definition.ch ++;

//選択肢の中で一番大きい文字列幅を得る。

let maxLength = Utl.getMaxLengthOf( this.definition.itemTitles );

//check.　cellCw 未指定時　自動計算

if( this.definition.cellCw == null ) {

//maxLength を横幅とする

this.definition.cellCw = maxLength;

}

//check.　cw 未指定時　自動計算

if( this.definition.cw == null ) {

this.definition.cw = maxLength * this.definition.cols + ( this.definition.cols - 1 ) * this.definition.spacing;

//check.　タイトルについても考慮する

if( this.definition.title )

this.definition.cw = Math.max( this.definition.cw, this.definition.title.length );

}

//メニュー枠の内側のスペース（単位dot）

this.padding = this.appcfg.charsize / 2;

//画面上の描画位置とサイズ

this.gx = this.definition.cx * this.appcfg.charsize - this.padding;

this.gy = this.definition.cy * this.appcfg.charsize - this.padding;

this.gw = this.definition.cw * this.appcfg.charsize + this.padding * 2;

this.gh = this.definition.ch * this.appcfg.charsize + this.padding;

//カーソル位置

this.cursorX = 0;

this.cursorY = 0;

//選択された選択肢番号と選択肢

this.updateSelectedIndex();

}//constructor()

updateSelectedIndex() {

let index;

if( this.definition.masuDir ) {

//下へ

index = this.cursorY + this.cursorX * this.definition.rows;

} else {

//右へ

index = this.cursorX + this.cursorY * this.definition.cols;

}

//check.　選択項目が空欄

if( index >= this.definition.itemTitles.length ) {

this.selectedItemTitle = "";

this.selectedItem = null;

return;

}

this.selectedIndex = index;

this.selectedItemTitle = this.definition.itemTitles[ this.selectedIndex ];

if( this.definition.items )

this.selectedItem = this.definition.items[ this.selectedIndex ];

else

this.selectedItem = null;

}

//---View---

draw( cc ) {

cc.save();

cc.translate( this.gx, this.gy + this.padding ); //tr1

//枠を描画

cc.fillStyle = "white";

cc.strokeStyle = "black";

cc.fillRect( 0, 0, this.gw, this.gh );

cc.strokeRect( 0, 0, this.gw, this.gh );

//タイトルを描画

if( this.definition.title ) {

let leftSpace = Math.floor( ( this.definition.cw - this.definition.title.length ) / 2 );

let titleStringX = this.padding + leftSpace * this.appcfg.charsize;

let titleStringY = this.appcfg.charsize - 2;

let titleW = this.gw;

let titleH = this.appcfg.charsize;

//タイトル背景

cc.fillStyle = "blue";

cc.fillRect( 0, 0, titleW, titleH );

//タイトル文字

cc.fillStyle = "white";

cc.fillText( this.definition.title, titleStringX, titleStringY );

cc.fillText( this.definition.title, titleStringX + 1, titleStringY );

cc.translate( 0, this.appcfg.charsize ); //tr2

}

//選択肢を描画

cc.translate( this.padding, 0 ); //tr3

cc.fillStyle = "black";

for( let col = 0; col < this.definition.cols; col++ ) {

for( let row = 0; row < this.definition.rows; row++ ) {

let i;

if( this.definition.masuDir ) {

//下へ

i = row + col * this.definition.rows;

} else {

//右へ

i = col + row * this.definition.cols;

}

let gx = ( col * this.definition.cellCw + ( col > 0 ) * this.definition.spacing ) * this.appcfg.charsize;

let gy = row * this.definition.cellCh * this.appcfg.charsize;

//check.　カーソルを描画

if( col == this.cursorX && row == this.cursorY ) {

let bak = cc.fillStyle;

cc.fillStyle = "#ff7";

let gw = this.definition.cellCw * this.appcfg.charsize;

let gh = this.definition.cellCh * this.appcfg.charsize;

cc.fillRect( gx, gy, gw, gh );

cc.fillStyle = bak;

}

//check.

if( i >= this.definition.itemTitles.length ) continue;

cc.fillText( this.definition.itemTitles[ i ],

gx, gy + this.appcfg.charsize - 2 );

}

}

cc.restore();

//debug.　メニューの表示指定位置を示す赤い点

//（青いグリッドの交点と赤い点が一致している）

if( 1 ) {

cc.beginPath();

cc.arc( this.gx + this.padding, this.gy + this.padding, 2, 0, 6.28 );

cc.fillStyle = "red";

cc.fill();

}

}

//---Controller---

keyExec( key ) {

//キーを処理する（Menu）

if( key == 90 ) { //z key

//決定キーの挙動

this.sigotoOk( true );

/*

RPGイベントスクリプト（たとえばstoryOfCamp()）内の

while( await menu.select() ) {...} のselect()の返値がこの引数。

trueは「メニュー選択が行われた」という意味

falseは「「メニュー選択がキャンセルされた」という意味

*/

}

else if( key == 88 ) { //x key

//キャンセルキーの挙動

this.selectedIndex = null;

this.selectedItemTitle = null;

this.selectedItem = null;

this.sigotoOk( false );

}

else {

//カーソルの移動

let addX = ( key == 39 ) - ( key == 37 );

let addY = ( key == 40 ) - ( key == 38 );

if( addX || addY ) {

this.cursorX += addX;

this.cursorY += addY;

//check.　範囲外

if( this.cursorX < 0 )

this.cursorX = 0;

else if( this.cursorX >= this.definition.cols )

this.cursorX = this.definition.cols - 1;

if( this.cursorY < 0 )

this.cursorY = 0;

else if( this.cursorY >= this.definition.rows )

this.cursorY = this.definition.rows - 1;

this.updateSelectedIndex();

}//if

}//if

}//keyExec()

select() {

return new Promise( function( sigotoOk ) {

this.sigotoOk = sigotoOk;

}.bind( this ) );

/*

new Promise()の引数の関数はすぐに実行される。

その際に関数に渡される引数のsigotoOkは

Promiseの完了を知らせる関数である。

この関数（sigotoOk）はJavaScriptのシステムが自動的に引数として渡す。

sigotoOk()がどこかのタイミング（ここではkeyExec()内）で

実行されると、awaitで一時停止していたJavaScript（ここではstoryOfCamp()）

が再開される。

*/

}//select()

}//Menu

//#####

</script>

<style>

.help, .help div {

position : absolute;

top : 0;

right : 0;

padding : .5em;

}

</style>

</head>

<body onload="onloadx()">

<canvas id="testCanvas" style="

object-fit : contain;

width : 100%;

height : 100%;

">

There is no canvas.

</canvas>

<div class="help" style="background-color:white; border:solid 3px #0f0;">

<div style="

background-color : #0f0;

border-radius : 0 0 0 1em;

cursor : pointer;

" onclick="this.parentNode.style.display = 'none';">　HELP　×　</div>

zキーまたはタッチ　：　「決定」<BR>

xキーまたはダブルタッチ　：　「キャンセル」<BR>

方向キーまたはフリック　：　その方向に1回動かします。<BR>

スワイプして止める　：　方向キーを押し続ける動きになります。

</div>

</body>

</html>